<template>
  <div class="warehouse">
    <h1>仓库管理系统</h1>
    <!-- 展示仓库 -->
    <div v-if="currentLevel === 'warehouse'" class="warehouse-list">
      <div v-for="(location, index) in warehouse.locations" :key="index" class="location" @click="selectLocation(location)">
        <h3>{{ location.name }}</h3>
        <p>{{ location.fridges.length }} 冰箱</p>
      </div>
    </div>

    <!-- 展示库位中的冰箱 -->
    <div v-if="currentLevel === 'location'" class="fridge-list">
      <button @click="goBack('warehouse')">返回</button>
      <h2>{{ selectedLocation.name }} 库位</h2>
      <div v-for="(fridge, index) in selectedLocation.fridges" :key="index" class="fridge" @click="selectFridge(fridge)">
        <h3>{{ fridge.name }}</h3>
        <p>{{ fridge.shelves.length }} 层</p>
      </div>
    </div>

    <!-- 展示冰箱的层 -->
    <div v-if="currentLevel === 'fridge'" class="shelf-list">
      <button @click="goBack('location')">返回</button>
      <h2>{{ selectedFridge.name }} 冰箱</h2>
      <div v-for="(shelf, index) in selectedFridge.shelves" :key="index" class="shelf" @click="selectShelf(shelf)">
        <h3>{{ shelf.name }}</h3>
        <p>{{ shelf.rack.length }} 试管架</p>
      </div>
    </div>

    <!-- 展示冰箱层的试管架 -->
    <div v-if="currentLevel === 'shelf'" class="rack-list">
      <button @click="goBack('fridge')">返回</button>
      <h2>{{ selectedShelf.name }} 层</h2>
      <div v-for="(rack, index) in selectedShelf.rack" :key="index" class="rack">
        <h3>{{ rack.name }} (使用率: {{ getRackUsage(rack) }}%)</h3>
        <div class="holes">
          <div v-for="(hole, index) in rack.holes" :key="index" :class="['hole', { occupied: hole.occupied }]">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 定义数据类型
interface Hole {
  occupied: boolean;
}

interface Rack {
  name: string;
  holes: Hole[];
}

interface Shelf {
  name: string;
  rack: Rack[];
}

interface Fridge {
  name: string;
  shelves: Shelf[];
}

interface Location {
  name: string;
  fridges: Fridge[];
}

interface Warehouse {
  locations: Location[];
}

// 状态变量
const currentLevel = ref<'warehouse' | 'location' | 'fridge' | 'shelf'>('warehouse');
const warehouse = ref<Warehouse>({
  locations: [
    {
      name: '库位 1',
      fridges: [
        {
          name: '冰箱 1',
          shelves: [
            {
              name: '层 1',
              rack: Array.from({ length: 3 }, (_, i) => ({
                name: `试管架 ${i + 1}`,
                holes: Array.from({ length: 10 }, () => ({ occupied: Math.random() > 0.5 }))
              })),
            },
            {
              name: '层 2',
              rack: Array.from({ length: 3 }, (_, i) => ({
                name: `试管架 ${i + 1}`,
                holes: Array.from({ length: 10 }, () => ({ occupied: Math.random() > 0.5 }))
              })),
            }
          ]
        },
        {
          name: '冰箱 2',
          shelves: [
            {
              name: '层 1',
              rack: Array.from({ length: 3 }, (_, i) => ({
                name: `试管架 ${i + 1}`,
                holes: Array.from({ length: 10 }, () => ({ occupied: Math.random() > 0.5 }))
              })),
            }
          ]
        }
      ]
    },
    {
      name: '库位 2',
      fridges: [
        {
          name: '冰箱 3',
          shelves: [
            {
              name: '层 1',
              rack: Array.from({ length: 3 }, (_, i) => ({
                name: `试管架 ${i + 1}`,
                holes: Array.from({ length: 10 }, () => ({ occupied: Math.random() > 0.5 }))
              })),
            },
            {
              name: '层 2',
              rack: Array.from({ length: 3 }, (_, i) => ({
                name: `试管架 ${i + 1}`,
                holes: Array.from({ length: 10 }, () => ({ occupied: Math.random() > 0.5 }))
              })),
            }
          ]
        }
      ]
    }
  ]
});

// 选中的项
const selectedLocation = ref<Location | null>(null);
const selectedFridge = ref<Fridge | null>(null);
const selectedShelf = ref<Shelf | null>(null);

// 获取试管架使用率
const getRackUsage = (rack: Rack) => {
  const totalHoles = rack.holes.length;
  const occupiedHoles = rack.holes.filter(hole => hole.occupied).length;
  return ((occupiedHoles / totalHoles) * 100).toFixed(2);
};

// 切换到库位展示
const selectLocation = (location: Location) => {
  selectedLocation.value = location;
  currentLevel.value = 'location';
};

// 切换到冰箱展示
const selectFridge = (fridge: Fridge) => {
  selectedFridge.value = fridge;
  currentLevel.value = 'fridge';
};

// 切换到层展示
const selectShelf = (shelf: Shelf) => {
  selectedShelf.value = shelf;
  currentLevel.value = 'shelf';
};

// 返回上一层
const goBack = (level: 'warehouse' | 'location' | 'fridge') => {
  if (level === 'warehouse') {
    selectedLocation.value = null;
  } else if (level === 'location') {
    selectedFridge.value = null;
  } else if (level === 'fridge') {
    selectedShelf.value = null;
  }
  currentLevel.value = level;
};
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
}

.warehouse {
  padding: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

button {
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.warehouse-list,
.fridge-list,
.shelf-list,
.rack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.location,
.fridge,
.shelf,
.rack {
  background-color: #e0f7fa;
  padding: 15px;
  border-radius: 8px;
  width: calc(33.33% - 15px);
  box-sizing: border-box;
  cursor: pointer;
}

.location:hover,
.fridge:hover,
.shelf:hover,
.rack:hover {
  background-color: #4caf50;
  color: white;
}

.holes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.hole {
  width: 15px;
  height: 15px;
  background-color: #ddd;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.hole.occupied {
  background-color: #ff5722;
}

.hole:hover {
  background-color: #4caf50;
}
</style>
